<#assign ctx=request.contextPath />
<#import '${ctx}/sys/include/head.html' as d />
<#import '${ctx}/sys/include/body.html' as c />
<#import '${ctx}/sys/include/table/select.html' as select />
<!DOCTYPE html>
<html>
<head>
    <@d.head title="pie" />
    <!--<script src="${ctx}/resource/echart/echarts.js/" type="text/javascript"></script>-->
    <!--<script src="${ctx}/resource/echart/theme/macarons.js"></script>-->

    <script src="${ctx}/resource/antv/g2.js"></script>
    <script src="${ctx}/resource/antv/dataset.js"></script>
    <style>::-webkit-scrollbar {
        display: none;
    }

    html, body {
        overflow: hidden;
        height: 100%;
        margin: 0;
    }</style>
</head>
<@c.body>
<div class="layui-tab layui-tab-brief" lay-filter="graph_config">
    <ul class="layui-tab-title">
        <li>图表展示</li>
        <li class="layui-this">图表设置</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item">
            <div class="layui-form">
				<span class="layui-breadcrumb"> <a href="#"><cite>第一级</cite></a>
					<a href="#">第二级</a> <a href="#">第三级</a>
				</span>
                <div class="layui-form-item">
                    <label class="layui-form-label">过滤条件</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"/>
                    </div>
                </div>
                <div id="condition_span">
                    <span class="layui-badge-rim">第一级:产线:Station01s</span> <span
                        class="layui-badge-rim">第二级:生产日期=2019-01</span>
                    <div class="layui-btn-group">
                        <button class="layui-btn layui-btn-primary layui-btn-sm">
                            <i class="layui-icon"></i>
                        </button>
                    </div>
                </div>

            </div>
            <div id="bar" class="text-center"></div>
        </div>
        <div class="layui-tab-item layui-show">
            <div class="layui-container" style="margin-top: 12px;">
                <div class="layui-row">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">选择数据源</label>
                            <div class="layui-input-block"><@select.table name="dsId"
                                show="dsName" url="${ctx}/biz/c/p/ds-select-table" />
                            </div>
                        </div>
                        <label>指标设置</label>
                        <hr/>
                        <div id="metric_card">
                            <div class="layui-card">
                                <div class="layui-card-header">分析指标</div>
                                <div class="layui-card-body">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">计算方式</label>
                                        <div class="layui-input-block">
                                            <select lay-verify="required"
                                                    lay-filter="metric_select">
                                                <option value="count">总数</option>
                                                <option value="sum">累和</option>
                                                <option value="avg">平均值</option>
                                                <option value="unique">唯一值</option>
                                            </select>
                                            <input name="metricAggregation" class="layui-hide" value="count">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">计算字段</label>
                                        <div class="layui-input-block"><@select.table
                                            name="metricValue" show="metricName"
                                            url="${ctx}/biz/c/p/field-select-table" />
                                        </div>
                                    </div>
                                    <div name="btn_group" class="layui-btn-group" style="float:right">
                                        <button class="layui-btn layui-btn-primary layui-btn-sm">
                                            <i class="layui-icon"></i>
                                        </button>
                                        <button class="layui-btn layui-btn-primary layui-btn-sm">
                                            <i class="layui-icon"></i>
                                        </button>
                                    </div>
                                    <div class="layui-clear"></div>
                                </div>
                            </div>
                        </div>

                        <label>维度设置</label>
                        <hr/>
                        <div class="layui-form-item">
                            <label class="layui-form-label">拆分方式</label>
                            <div class="layui-input-block">
                                <select name="dimension" lay-verify="required"
                                        lay-filter="dimension_select">
                                    <option value="terms">按字段值</option>
                                    <option value="date">按时间</option>
                                    <option value="range">按区间</option>
                                    <option value="filters">按条件</option>
                                </select>
                                <input name="dimensionAggregation" class="layui-hide" value="terms">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">聚合字段</label>
                            <div class="layui-input-block"><@select.table
                                name="dimensionValue" show="dimensionName"
                                url="${ctx}/biz/c/p/field-select-table" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</@c.body>
<script type="text/javascript">
    layui.use(['form', 'element', 'appJs'], function () {
        var $ = layui.$;
        var form = layui.form, element = layui.element, app = layui.appJs;

        var redraw = true;

        element.on('tab(graph_config)', function (data) {
            console.log(data.index); //得到当前Tab的所在下标
            if (data.index == 0) {
                if (redraw)
                    draw();
            }
        });

        form.on('select(metric_select)', function (data) {
            $('input[name="metric"]').val(data.value); //得到被选中的值
        });
        form.on('select(dimension_select)', function (data) {
            $('input[name="dimension"]').val(data.value); //得到被选中的值
        });
        // form.on('select(metric_select)', function (data) {
        //     var ele = data.elem;
        //     var val = data.value;
        //     console.log("=>" + val)
        //     if (val != 'none') {
        //         $(ele).parent().parent().next().removeClass('layui-hide');
        //     } else {
        //     $(ele).parent().parent().next().addClass('layui-hide');
        //     }
        // });
        form.render();
        var chart;

        function draw() {
            var metrics = "count(" + $('input[name="metricValue"]').val() + ")";//多个y axis 指标
            var dimension = "terms(" + $('input[name="dimensionValue"]').val() + ")"; // aggregation
            var ds_id = $('input[name="dsId"]').val(); // datasource

            //TODO dimensions应该包括aggregation和field
            // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
            $.post('${ctx}/biz/visualize/draw', {
                metrics: metrics,
                dimension: dimension,
                ds_id: ds_id
            }, function (data) {
                if (data.code != 0) {
                    layer.msg(data.code + ":" + data.msg);
                } else {
                    var chart = new G2.Chart({
                        container: 'bar',
                        forceFit: true,
                        height: 660,
                        width: 1600
                    });

                    var ods = data.values.data;
                    var ndata = [
                        {field: 'V1.00', count: 40},
                        {field: 'V3.00', count: 30}
                    ];


                    var ds = new DataSet({
                        state: {
                            field: 'V1.03'
                        }
                    });

                    var dv = ds.createView().source(ndata);

                    dv.transform({
                        type: 'filter',
                        callback(row) {
                            return row.field === ds.state.field;
                        }
                    });

                    chart.source(dv);
                    chart.IntervalStack().position('field*count').color('field');

                    ds.setState('field', 'V1.03');


                    var option = {
                        data: ds,
                        type: 'bar',
                        position: 'field*val',
                        color: 'field'
                    }

                    // app.pic(chart, option);
                    chart.render();
                }
            });
        }
    });
</script>